<script setup lang="ts">

import PageTop from "components/page-top.vue";
import PageBackground from "components/page-background.vue";
import {onMounted, ref} from "vue";
import APIClient from "src/utils/APIClient";

onMounted(()=>{
  getUserBehavior()
})

let columns = ref([
  { name: 'UserName', label: '用户', field: 'UserName', sortable: true, align: 'center', headerAlign: 'center' },
  { name: 'Note', label: '分类', field: 'Note', sortable: true, align: 'center', headerAlign: 'center' },
  { name: 'OperationContent', label: '操作动作', field: 'OperationContent', sortable: true, align: 'center', headerAlign: 'center' },
  { name: 'CreatedAt', label: '产生时间', field: 'CreatedAt', sortable: true, align: 'center', headerAlign: 'center' },
  { name: 'State', label: '状态', field: 'State', sortable: true, align: 'center', headerAlign: 'center' },
])

//查询某个用户的用户行为
let userId = ref('')
let rows = ref([])

let pagination = ref({
  current: 1,
  rowsPerPage: 20,
  pagesNumber: 0
})

const getUserBehavior = () => {
  let para = {
    user_id:Number(userId.value),
    state:1,
    limit:12,
    offset:pagination.value.current
  }
  if (userId.value == '') delete para.user_id;
  APIClient.post('/user/video/user_behavior/query',para).then(res=>{
    if (!res.data) return;
    rows.value = res.data?.types
    pagination.value.pagesNumber =Math.ceil( res.data?.total / 20)
  })
}

const paginationChange = (value:number) => {
  pagination.value.offset = value
  getUserBehavior()
}
</script>

<template>
  <div class="user-behavior">
    <page-background></page-background>
    <page-top></page-top>
    <div class="user-out">
      <div class="user-com">
        <q-table
          title="用户行为记录"
          :rows="rows"
          :columns="columns"
          row-key="name"
          :pagination="{
            rowsPerPage:20
          }"
          style="height: 92%;"
          hide-bottom>
          <template v-slot:top>
            <div class="title">用户行为记录</div>
            <q-input label="查看某个用户的行为" @keydown.enter="getUserBehavior"  dense debounce="300" color="primary" class="search" v-model="userId">
              <template v-slot:append>
                <q-icon name="search" @click="getUserBehavior"/>
              </template>
            </q-input>
          </template>
        </q-table>
       <div class="pagination">
         <q-pagination
           v-model="pagination.current"
           color="black"
           style="background: #fff;"
           :max="pagination.pagesNumber"
           :max-pages="20"
           @update:model-value="paginationChange"
         />
       </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.user-behavior{
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
  .user-out{
    position: absolute;
    width: 100%;
    height: calc(100vh - 100px);
    display: flex;
    justify-content: center;
    align-items: center;
   
    .user-com{
      width: 97%;
      height: 100%;
      background: #fff;

      .title{
        font-size: 24px;
      }

      .search{
        margin-left: 40px;
      }

      .pagination{
        display: flex;
        justify-content: center;
        padding: 20px 0;
        background: #fff !important;
      }

      :deep(.q-table) {
        .q-table__top, .q-table__middle, .q-table__bottom {
          text-align: center;
        }

        th, td {
          text-align: center !important;
        }

        .q-table-top {
          text-align: center;
        }
      }
    }
  }
}
</style>
